﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属于自己的小世界</title>
    <link rel="stylesheet" href="index.css">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
    body{
        overflow: hidden;
        background: #4456a7;
    }
* {
	margin:0;
	padding:0;
	font-family:Microsoft YaHei,serif;
}
li {
	list-style:none;
}
.ball {
	position:absolute;
	top:0;
	left:0;
	width:80px;
	height:80px;
	background:pink;
	border-radius:50%;

}
.city{
    height: 200px;
    background: url("images/s_city.png");
    position: fixed;
    z-index: 100;
    width: 100%;
    bottom: 0;
    left: 0;
}
.cloud{}
.cloud .item{
    position: absolute;

}
    .cloud .item01{
        width: 13%;
        /*left: -8%;*/
        left: 0%;
        transform: translateX(-100%);
        z-index: 6;
        animation:cloudRun 10s linear infinite
    }
    .cloud .item02{
        width: 17%;
        /*left: 97%;*/
        left: 0%;
        transform: translateX(-100%);
        animation:cloudRun 10s linear infinite 2s
    }
    .cloud .item03{
        width: 6%;
        /*left: 7%;*/
        left: 0%;
        transform: translateX(-100%);
        z-index: 5;
        animation:cloudRun 10s linear infinite 4s;
    }
    .cloud .item04{
        width: 12%;
        /*left: 23%;*/
        left: 0%;
        transform: translateX(-100%);
        z-index: -1;
        animation:cloudRun 10s linear infinite 8s;
    }
    .cloud .item05{
        width: 17%;
        /*left: 11%;*/
        left: 0%;
        transform: translateX(-100%);
        animation:cloudRun 10s linear infinite 6s;
    }

    .cloud .item06{
        width: 17%;
        /*left: 37%;*/
        left: 0%;
        transform: translateX(-100%);
        animation:cloudRun 10s linear infinite 10s;
    }
    .cloud .item07{
        width: 8%;
        /*left: 56%;*/
        left: 0%;
        transform: translateX(-100%);
        top: 8%;
        animation:cloudRun 10s linear infinite 1s;
    }

    .cloud .item08{
        width: 19%;
        /*left: 71%;*/
        left: 0%;
        transform: translateX(-100%);
        animation:cloudRun 10s linear infinite 15s;
    }
    @keyframes cloudRun
    {
        0%{
            left: 0%;
        }

        100%{
            left: 130%;
        }
    }
    .cloud01{
        height: 300px;
        position: absolute;
        animation:cloudRun 10s linear;
        -moz-animation:cloudRun 10s linear; /* Firefox */
        -webkit-animation:cloudRun 10s linear infinite; /* Safari and Chrome */
        -o-animation:cloudRun 10s linear; /* Opera */
    }


</style>
</head>
<body>
<div></div>
<div class="cloud">
    <img class="item01 item" src="images/s_yun01.png" alt="">
    <img class="item02 item" src="images/s_yun02.png" alt="">
    <img class="item03 item" src="images/s_yun03.png" alt="">
    <img class="item04 item" src="images/s_yun04.png" alt="">
    <img class="item05 item" src="images/s_yun01.png" alt="">
    <img class="item06 item" src="images/s_yun02.png" alt="">
    <img class="item07 item" src="images/s_yun03.png" alt="">
    <img class="item08 item" src="images/s_yun04.png" alt="">

</div>
<!--<img class="cloud01" src="images/s_yun.png" alt="">-->
<div class="city" style="opacity: 0;"></div>
<div id="wind" style="opacity: 0;">
    <div id="plane" class="front">
        <textarea class="message" placeholder="心灵深处的秘密，折成纸飞机 ~放飞~"></textarea>
        <button class="send"> 起飞 </button> <br/>
        <div id="plane_bottom">
            <a href="javascript:;" id="plane_close"> X </a>
        </div>
    </div>

    <div id="wind_container" class="beginning">
        <div id="left-wing">
            <div class="top_left curvable"> </div>
            <div class="bottom_left curvable"> </div>
            <div class="wing wing1"></div>
            <div class="wing wing2"></div>
        </div>

        <div id="right-wing">
            <div class="top_right curvable"> </div>
            <div class="bottom_right curvable"> </div>
            <div class="wing wing3"></div>
            <div class="wing wing4"></div>
        </div>

    </div>

</div>
<div style="position: fixed;width: 100%;bottom: 0;    z-index: 10000000000000;">
    <a style="display: block;text-align: center;color: #000;text-decoration: auto;"
       href="https://beian.miit.gov.cn/"
       target="_blank">备案号：晋ICP备2022006609号-1</a>
</div>
<script>
  play(10);

  function play(num) {
      //生成num个div
      for (var i = 0; i < num; i++) {
          var Div = document.createElement("div");
          Div.className = "ball";
          Div.leftVal = 3 + i; //预存每个球的初始速度
          Div.topVal = 3 + i; //预存每个球的初始速度
          // Div.style.backgroundColor = randomC();
          Div.style.background = randomImg();
          Div.style.transform = rotateImg();
          document.body.appendChild(Div);
      }

      var aBall = document.querySelectorAll(".ball");
      maxTop = document.documentElement.clientHeight - aBall[0].clientHeight, //获取top的最大值
          maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //获取left的最大值

      window.onresize = function() {
          maxTop = document.documentElement.clientHeight - aBall[0].clientHeight; //获取top的最大值
          maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //
      };

      auto();

      function auto() {
          for (var i = 0; i < num; i++) {
              var Ball = aBall[i],
                  startL = Ball.offsetLeft, //取每个球的初始left和TOP值
                  startT = Ball.offsetTop, //取每个球的初始left和TOP值
                  Left = startL + Ball.leftVal, //改变，每个球的left和top值
                  Top = startT + Ball.topVal; //改变，每个球的left和top值


              if (Left >= maxLeft || Left <= 0) {
                  Left = Math.min(Left, maxLeft); //限制Left的最大值
                  Left = Math.max(Left, 0); //限制最小值

                  Ball.leftVal = -Ball.leftVal;
                  // Ball.style.backgroundColor = randomC();
                  Ball.style.background = randomImg();

              }
              if (Top >= maxTop || Top <= 0) {
                  Ball.topVal = -Ball.topVal;

                  Top = Math.min(Top, maxTop); //限制Left的最大值
                  Top = Math.max(Top, 0); //限制最小值
                  // Ball.style.backgroundColor = randomC();
                  Ball.style.background = randomImg();
              }


              Ball.style.top = Top + "px";
              Ball.style.left = Left + "px";
          }
          requestAnimationFrame(auto)

      }
      // rgb(0-255)
      function randomC() {
          var r = Math.floor(Math.random() * 256),
              g = Math.floor(Math.random() * 256),
              b = Math.floor(Math.random() * 256);
          return "rgb(" + r + "," + g + "," + b + ")";
      }
      function randomImg() {
          let num = Math.floor(Math.random() * 5) + 1;
          return `url("images/s_0${num}.png")`;
      }
      function rotateImg() {
          let num = Math.floor(Math.random() * 360);
          return `rotate(${num}deg)`;
      }



  }
</script>
<script>
    $(function(){
        // 纸飞机

        // 起飞
        $('.send').click(function() {
            // 步骤一：隐藏面板、显示飞机、完成折叠效果
            setTimeout(function() {
                // 隐藏信息面板
                $('#plane').removeClass('front');
                // 翻转至正面
                $('#wind_container').removeClass('beginning');
                // 折叠效果（左翼、右翼）
                $('.curvable').addClass('curved');
                // 颜色变换
                // $("body").css({"background-color": "#54575A"});

                // 步骤二：平放飞机
                setTimeout(function() {
                    $('#wind_container').addClass('hover');
                    // $("body").css({"background-color": "#AD8BD8"});

                    // 步骤三：飞机后退助跑
                    setTimeout(function() {
                        $('#wind_container').addClass('fly_away_first');
                        // $("body").css({"background-color": "#6E99C4"});

                        // 步骤四：飞机向前飞翔至消失
                        setTimeout(function() {
                            $('#wind_container').addClass('fly_away');
                            // $("body").css({"background-color": "#3F9BFF"});

                            // 步骤五：飞机复位
                            setTimeout(function(){
                                $('#plane').addClass('front');
                                $('#wind_container').removeClass('fly_away fly_away_first hover').addClass('beginning');
                                $('.curvable').removeClass('curved');
                                // $("body").css({"background-color": "#000"});
                            },3000);
                        }, 600);
                    }, 2000);
                }, 2800);
            }, 200);
        });


        // 关闭弹窗
        $("#plane_close").click(function(){
            $("#wind").fadeOut(200);
        });

    });
</script>
</body>
</html>
